<script setup>
import { reactive, ref } from "vue";
import request from '@/api/request'
import { useRouter } from "vue-router"
import { Search } from '@element-plus/icons-vue'

let router = useRouter();
const rules = reactive({

})

let Customer_Resources = ref({ customerResourcesCustomerSegmentation: "全部" })
let formRef = ref()



let isVisible = ref(false)
let title = ref("")
let data = ref({})

let customerResource = ref([])

let page = ref({
    current: 1,
    size: 5,
    total: 0,
    records: []
})

let toRemove = () => {
    request({
        //查询客户
        url: "/CustomerResources",
        method: "delete",
        data: customerResource.value
    }).then(res => {
        location()
    })
}
//修改
let toUpdate = async (row) => {
    title.value = "修改客户"
    isVisible.value = true;
    if (row != undefined) {
        data.value = row;
    } else {
        data.value = customerResource.value[0];
    }

    router.push("/sale/saleclient/update");
}

let refTanle = () => {
    isVisible.value = false;
    location()
}
//重置
let shuaxin = () => {
    formRef.value.resetFields();
}
//新增
let toInsert = () => {
    title.value = "新增客户";
    isVisible.value = true;
    router.push("/sale/saleclient/insert");
}
//选择框事件
let fuxuankuang = (a) => {
    customerResource.value = a
}

let location = () => {
    request({
        //查询客户
        url: "/CustomerResources",
        method: "get",
        params: {
            current: page.value.current,
            size: page.value.size,
            ...Customer_Resources.value
        }
    }).then(res => {
        page.value = res.data
    })
}

location();


const tableRef= ref();


</script>

<template>
    <div>
        <el-card>
            <template #header>
                <el-form ref="formRef" inline :model="Customer_Resources" style="display: flex;justify-content: start;"
                    class="card_wrap">
                    <el-form-item label="客户名称" prop="customerResourcesName" class="c_item">
                        <el-input v-model="Customer_Resources.customerResourcesName" class="sousuo"
                            placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="客户编码" prop="customerResourcesId" class="c_item">
                        <el-input v-model="Customer_Resources.customerResourcesId" class="sousuo"
                            placeholder="请输入编码"></el-input>
                    </el-form-item>
                    <el-form-item label="客户电话" prop="customerResourcesContactPhone" class="c_item">
                        <el-input v-model="Customer_Resources.customerResourcesContactPhone" class="sousuo"
                            placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="客户等级" prop="customerResourcesCustomerSegmentation" class="c_item">
                        <el-select class="sousuo" placeholder="客户等级"
                            v-model="Customer_Resources.customerResourcesCustomerSegmentation" @change="location">
                            <el-option value="全部" label="全部"></el-option>
                            <el-option value="一级" label="一级"></el-option>
                            <el-option value="二级" label="二级"></el-option>
                            <el-option value="三级" label="三级"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="c_item">
                        <template #default>
                            <el-button type="primary" @click="location">搜索</el-button>
                            <el-button type="info" :plain=true @click="shuaxin">重置</el-button>
                            <p></p>
                        </template>
                    </el-form-item>
                </el-form>

                <div style="margin: 20px 0px;">
                    <el-button @click="toInsert" type="primary" :plain="true">+添加</el-button>
                    <el-button type="success" :plain=true @click="toUpdate(null)" style="border:0px"
                        :disabled="customerResource.length != 1">修改</el-button>
                    <el-button type="danger" :plain=true @click="toRemove" style="border:0px"
                        :disabled="!customerResource.length">删除</el-button>
                </div>

                <el-table ref="tableRef" :data="page.records" :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" @selection-change="fuxuankuang" :border="true"
                    show-overflow-tooltip>
                    <el-table-column type="selection" width="55" />

                    <el-table-column prop="customerResourcesId" label="客户编码" width="90px;" />
                    <el-table-column prop="customerResourcesName" label="客户名称" width="100px;" />
                    <el-table-column prop="customerResourcesCustomerSegmentation" label="客户分类" width="110px;" />
                    <el-table-column prop="customerResourcesCustomerSource" label="客户来源" width="100px;" />
                    <el-table-column prop="customerResourcesCustomerTags" label="客户标签" width="90px;" />
                    <el-table-column prop="customerResourcesSettlementPeriod" label="结算期限" width="100px;" />
                    <el-table-column prop="customerResourcesCreditLimit" label="信用额度/元" width="110px;" />
                    <el-table-column prop="nickname" label="销售负责人" width="110px;" />
                    <el-table-column prop="customerResourecsAddress" label="客户地址" width="100px;" />
                    <el-table-column prop="customerResourcesFulladdress" label="详细地址" width="100px;" />
                    <el-table-column prop="customerResourcesContact" label="联系人" width="80px;" />
                    <el-table-column prop="customerResourcesContactPhone" label="联系人电话" width="100px;" />
                    <el-table-column prop="customerResourcesContactPosition" label="联系人职位" width="130px;" />
                    <el-table-column label="操作" width="120px;" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" @click="toUpdate(scope.row)" :row="scope.row">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination @current-change="location" v-model:currentPage="page.current"
                    :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                </el-pagination>

                <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                    <router-view @ref-table="refTanle" :data="data">
                    </router-view>
                </el-dialog>
            </template>

        </el-card>

    </div>
</template>

<style scoped>
.sousuo {
    width: 200px;
    /* margin-right: 100px; */
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

:deep(.el-tooltip):hover {
    cursor: pointer;
}
</style>